<!-- 库房管理-入库管理-销售退回收货 -->
<script lang="ts">
export default {
  name: "retreatSubitem",
  components: {
    retreatSubitem,
    addRetreat
  }
};
</script>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import retreatSubitem from "/@/views/wms/retreat/retreatSubitem.vue";
import addRetreat from "/@/views/wms/retreat/addRetreat.vue";
import { dateFormatYMD } from "/@/utils/date";
import { querySaleShippingBackPage } from "/@/api/wms/retreat";
import { queryCodeNameByType } from "/@/api/log/interfaceLog";
import { useRoute } from "vue-router";
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});
const table = reactive({
  loading: false,
  tableData: [] as any[],
  tableHeight: 0,
  bnoTypeData: [] as any[], //存储单据类型
  listQuery: {
    date: "",
    bnoNo: "",
    arrivalTime: "" as any,
    sourceDocuments: "",
    customerName: "",
    finishFlag: "" as any,
    bnoType: ""
  }
});

// 查询
const searchEvent = () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  data.finishFlag =
    table.listQuery.finishFlag === "" || table.listQuery.finishFlag == -1
      ? -1
      : table.listQuery.finishFlag;

  table.loading = true;
  if (table.listQuery.date) {
    data.startMakeDate = dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endMakeDate = dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startMakeDate = "";
    data.endMakeDate = "";
  }
  delete data.date;
  if (table.listQuery.arrivalTime) {
    data.startArrivalTime =
      dateFormatYMD(table.listQuery.arrivalTime[0]) + " 00:00:00";
    data.endArrivalTime =
      dateFormatYMD(table.listQuery.arrivalTime[1]) + " 23:59:59";
  } else {
    data.startArrivalTime = "";
    data.endArrivalTime = "";
  }
  delete data.arrivalTime;
  querySaleShippingBackPage(data).then((res: any) => {
    if (res.code === 0) {
      table.tableData = res.data.list;
      page.totalResult = res.data.total;
    }
    table.loading = false;
  });
};

// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};

// 销售退回收货---新增操作开始
const addRetreatDialog = ref(false);
// 弹窗打开
const addRetreatShow = () => {
  addRetreatDialog.value = true;
};
// 弹窗关闭
const addRetreatClose = () => {
  addRetreatDialog.value = false;
};
// 销售退回收货---新增操作结束

// 销售退回收货---入库操作开始
const retreatItem = reactive({
  title: "", //标题
  subItemId: 0, //子项操作ID
  dialogShow: false, //子项操作显示隐藏
  readonly: false, //是否只读
  formShow: false //子项表单显示隐藏
});
// 查看详情操作
const retreatItemShow = (row: any) => {
  retreatItem.title = "查看详情";
  retreatItem.dialogShow = true;
  retreatItem.formShow = true;
  retreatItem.subItemId = row.id;
};
// 弹窗关闭
const retreatItemClose = () => {
  retreatItem.title = "";
  retreatItem.dialogShow = false;
  retreatItem.formShow = false;
  retreatItem.readonly = false;
  retreatItem.subItemId = 0;
};
// 销售退回收货---入库操作结束

// 获取单据类型
const queryType = (code: any) => {
  queryCodeNameByType(code).then((res: any) => {
    if (res.code == 0) {
      table.bnoTypeData = res.data;
    }
  });
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    searchEvent();
    queryType("销售退回收货");
    table.tableHeight = changeHeight();
  });
});
</script>
<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="单号">
        <template #default="{ data }">
          <vxe-input v-model="data.bnoNo" placeholder="请输入单号"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="单据类型">
        <template #default="{ data }">
          <el-select
            v-model="data.bnoType"
            filterable
            clearable
            placeholder="请选择"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in table.bnoTypeData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="客户">
        <template #default="{ data }">
          <vxe-input
            v-model="data.customerName"
            placeholder="请输入客户"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="来源单据">
        <template #default="{ data }">
          <vxe-input
            v-model="data.sourceDocuments"
            placeholder="请输入来源单据"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="制单日期" field="date">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.date"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item title="到货日期" field="arrivalTime">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.arrivalTime"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item title="状态" field="finishFlag">
        <template #default="{ data }">
          <el-select
            v-model="data.finishFlag"
            filterable
            clearable
            placeholder="请选择状态"
            size="small"
            style="width: 100%"
          >
            <el-option label="完成" :value="1">完成</el-option>
            <el-option label="待办" :value="0">待办</el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            icon="fa fa-search"
            status="primary"
            @click="searchEvent"
            v-auth="routeName + ':search'"
            >查询</vxe-button
          >
          <vxe-button
            icon="fa fa-plus"
            status="primary"
            @click="addRetreatShow"
            v-auth="routeName + ':add'"
            >新增</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-table
      ref="xTable"
      class="mytable-style"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="bnoNo" title="单号" min-width="150"></vxe-column>
      <vxe-column field="bnoTypeName" title="单据类型" width="150"></vxe-column>
      <vxe-column
        field="customerName"
        title="退货客户"
        min-width="200"
      ></vxe-column>
      <vxe-column
        field="customerAddress"
        title="客户位置"
        width="200"
      ></vxe-column>
      <vxe-column field="arrivalTime" title="到货日期" width="120">
        <template #default="{ row }">
          {{ row.arrivalTime ? row.arrivalTime.split(" ")[0] : "" }}
        </template>
      </vxe-column>
      <vxe-column
        field="sourceCategory"
        title="来源类别"
        min-width="150"
      ></vxe-column>
      <vxe-column
        field="sourceDocuments"
        title="来源单据"
        min-width="150"
      ></vxe-column>
      <vxe-column
        field="storeAddressName"
        title="存储地点"
        width="100"
      ></vxe-column>
      <vxe-column title="制单人" min-width="120">
        <template #default="{ row }">
          {{ row.userAccount }}<span>&lt;</span>{{ row.userName
          }}<span>&gt;</span>
        </template>
      </vxe-column>
      <vxe-column field="createDate" title="制单日期" width="100">
        <template #default="{ row }">
          {{ row.createDate ? row.createDate.split(" ")[0] : "" }}
        </template>
      </vxe-column>
      <vxe-column title="状态" width="80">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.finishFlag == 1">完成</el-tag>
          <el-tag type="warning" v-if="row.finishFlag == 0">待办</el-tag>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="120" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-eye"
            @click="retreatItemShow(row)"
            v-auth="routeName + ':checkDetail'"
            >查看详情</vxe-button
          >
          <!-- @click="pickEvent(row)" -->
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>
    <!-- 新增销售退回收货单 -->
    <add-retreat
      :dialogShow="addRetreatDialog"
      @addRetreatClose="addRetreatClose"
      @searchEvent="searchEvent"
    ></add-retreat>
    <!-- 销售退回收货---入库操作 -->
    <retreat-Subitem
      :title="retreatItem.title"
      :subItemId="retreatItem.subItemId"
      :dialogShow="retreatItem.dialogShow"
      :formShow="retreatItem.formShow"
      :readonly="retreatItem.readonly"
      @retreatItemClose="retreatItemClose"
      @searchEvent="searchEvent"
    ></retreat-Subitem>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
